<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>游戏排名榜</title>
    

	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/weui.min.css">
  </head>
  <style>
  body{
background:url(./images/test.jpg);
}
a:link {color:#353535;}               /* 未被访问的链接*/
 a:visited {color:#353535;}            /* 已被访问过的链接 */
 a:hover {color:#353535;}            /* 鼠标悬浮在上的链接*/
 a:active {color:#353535;}   /* 鼠标点中激活链接*/
  </style>
  <body>

	
	<div class="weui-panel weui-panel_access" style="background:url(./images/test.jpg);">
		<div style="margin:20px 8px 20px 25px;color:green;font-family:微软雅黑;font-size:28px;">游戏排名榜
		<button href="javascript:;"  onClick="replay()" class="weui-btn weui-btn_mini weui-btn_primary" style="margin:10px 20px 0 0;float:right">继续游戏</button></div>
		<hr>
		<div class="weui-panel__bd" id="loanPanel" >
		<c:set var="rank"  value="1"></c:set>
		<c:forEach items="${gameList}" var="model">
			<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media__hd">
                        <img class="weui-media__thumb" src="${pageContext.request.contextPath }/images/${model.sex }.jpg">
                    </div>
                    <div class="weui-media__bd" >
                        <h4 class="weui-media__title" >${model.username }</h4>
                        <p class="weui-media__desc" style="color:#353535;">答对了${model.correctSum }道题</p>
                    </div>
                    <div style="margin:0 30px 0 50px;font-size:28px;">${rank}</div>
                    <c:set var="rank"  value="${rank+1 }"></c:set>
              </a>		
          </c:forEach>   
		</div>
		<div class="weui-panel__ft">
				<a href="javascript:void(0);"
					class="weui-cell weui-cell_access weui-cell_link" id="readMore">
					<div class="weui-cell__bd" id="moreText" style="text-align:center;">查看更多</div>
					<span class="weui-cell__ft"></span>
				</a>
			</div>
	</div>
	<div style="height:50px;"></div>
<div style="text-align:center;position:fixed;bottom:0;width:100%;color:rgba(0,0,0,.2);">新之火工作室@新林</div>
  </body>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var rank=${rank};
     var page = 2;
     var flag = true;
     $(function(){
          $("#readMore").click(function(){
              if(flag){
                 $("#moreText").html("加载中...");
                 flag = false;
                 $.ajax({
                   url:"${pageContext.request.contextPath}/user/loadMore",
                   type:"post",
                   data:{
                      page:page
                   },
                   success:function(data){
                        
                        if(data.length>0){
                        	page++;
                            flag=true;
                            var listHtml="";
                            for(var i=0;i<data.length;i++){
                            	listHtml+='<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'+
                                   ' <div class="weui-media__hd">'+
                                '<img class="weui-media__thumb" src="${pageContext.request.contextPath}/images/'+data[i].sex+'.jpg">'+
                            '</div>'+
                            '<div class="weui-media__bd">'+
                              '  <h4 class="weui-media__title">'+data[i].username+'</h4>'+
                               ' <p class="weui-media__desc" style="color:#353535;">答对了'+data[i].correctSum+'道题</p>'+
                            '</div>'+
                            '<div style="margin:0 30px 0 50px;font-size:28px;">'+rank+'</div>'+
                    ' </a>';
                    rank++;
                            }
                            $("#loanPanel").append(listHtml);
                            $("#moreText").html("查看更多");
                            
                        }else{ 
                        	$("#moreText").html("已经是全部");
                        }
                           
                        
                   }
                 });
               }
               
          });
     });
     
     function replay(){
    	 location.href='${pageContext.request.contextPath }/user/toGame';
     }
</script>
</html>
